<template>
	<view>
		<topbar title="创建群聊" jt_c="2" background="background:#5EBCA3;color:#fff;"></topbar>
		<view class="content">
			<u-form :model="form" ref="uForm">
				<u-form-item label="群名">
					<u-input v-model="form.name" />
				</u-form-item>
			</u-form>
			<view style="margin-top: 12rpx;">群成员</view>
			<u-checkbox-group @change="checkboxGroupChange">
				<view class="dis_f_co_l_c hy">
					<view v-for="(item, index) in obtainCitys" class="dis_f_l_c" >
						<u-checkbox v-model="item.checked" :name="item.id" :key="index"></u-checkbox>
						<image class="tx" :src="item.src" mode=""></image>
						<view>{{item.name}}</view>
					</view>
				</view>
				
			</u-checkbox-group>
			<view class="cj_btn dis_f_c_c" @click="cj_qun">创建</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '',
					
				},
				obtainCitys: [],
				hy_id:[],
			};
		},
		onLoad() {
			this.get_txl()
		},
		methods: {
			checkboxGroupChange(e) {
				console.log(e);
				this.hy_id = e
			},
			get_txl() {
				this.$.ajax(1, "post", "friend/friend_list", {
					uid: uni.getStorageSync('uid'),
					token: uni.getStorageSync('token'),
				}, (res) => {
					this.obtainCitys = res.data
					this.obtainCitys.forEach(function(item){
						console.log(item)
					})
					console.log(this.obtainCitys)
				})
			},
			cj_qun(){
				this.$.ajax(1, "post", "group/create_group", {
					uid: uni.getStorageSync('uid'),
					token: uni.getStorageSync('token'),
					title:this.form.name,
					uids:this.hy_id
				}, (res) => {
					console.log(res)
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: calc(var(--status-bar-height) + 98rpx) 24rpx 0 24rpx;
		.tx{
			width: 120rpx;
			height: 120rpx;
			margin-right: 12rpx;
			border-radius: 50%;
		}
		.hy{
			padding: 12rpx;
			// width: 100%;
		}
		.cj_btn{
			width: 100%;
			height: 88rpx;
			margin-top: 80rpx;
			border-radius: 20rpx;
			background-color: #5EBCA3;
			color: #fff;
		}
	}
</style>
